<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box"
			style="padding-top: 10rpx;padding-left: 30rpx;padding-right: 30rpx;" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<view v-if="tabItem.orderList.length === 0" style="padding-top: 250rpx;">
						<view class="nodata">
							<image src="../../static/order/img_placeholder_nodata.png"></image>
						</view>
						<view class="nodatatxt">
							<text>暂无数据</text>
						</view>
					</view>

					<!-- 订单列表 -->
					<view v-if="tabItem.orderList.length > 0" v-for="(item, index) in tabItem.orderList" :key="index"
						class="order-item">
						<view style="display: flex;margin-top: 6rpx;margin-bottom: 6rpx;">
							<view class="ordersn" style="flex: 6;">
								<text>订单编号:{{item.orderSn}}</text>
							</view>
							<view class="ordersn" style="flex: 1;">
								<text>{{item.orderStatus|formatStatus}}</text>
							</view>
						</view>
						<view class="goods-box-single">
							<image class="goods-img" :src="item.device.imageUrl" mode="aspectFill"></image>
							<view class="right" @click="navToDetailPage(item)">
								<view style="display: flex;">
									<view class="roomname"><text>{{ item.device.machineName }}</text>
									</view>
								</view>
								<!-- <text class="price">{{ item.price }}</text> -->
								<view style="display: flex;margin-top: 22rpx;margin-bottom: 17rpx;">
									<text class="stime" style="color: #9A9A9A;">开始时间:</text>
									<text class="stime">{{ item.startTime }}</text>
								</view>
								<view style="display: flex;">
									<text class="stime" style="color: #9A9A9A;">结束时间:</text>
									<text class="stime">{{ item.endTime }}</text>
								</view>
							</view>
						</view>
						<view style="margin-top: 10rpx;height: 40rpx;display: flex;margin-bottom: 10rpx;">
							<view class="createdatetime">
								<text>{{item.createDatetime}}</text>
							</view>
							<view style="flex: 1;line-height: 40rpx;">
								<text
									style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;">总计</text>
								<text
									style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #EA4A33;margin-left: 4rpx;">￥</text>
								<text
									style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 600;color: #EA4A33;">{{item.price}}</text>
							</view>
						</view>
						<view class="operate" v-if="item.orderStatus==2">
							<button class="share" open-type="share" :data-obj="item">
								<text>分享</text>
							</button>
							<view class="cannel" @click="cannelOrder(item)">
								<text>取消订单</text>
							</view>
							<view v-if="item.device.machineName.includes('台球')&&item.showStatus!=1" class="opendoor" @click="openDoor(item.id,item.showStatus,item.orderStatus)">
								<text class="iconfont icon-open"
									style="color: #0DA944;font-size: 26rpx;margin-right: 10rpx"></text>
								<text>开台</text>
							</view>
							<view v-if="!item.device.machineName.includes('台球')&&item.showStatus!=1" class="opendoor" @click="openDoor(item.id,item.showStatus,item.orderStatus)">
								<text class="iconfont icon-open"
									style="color: #0DA944;font-size: 26rpx;margin-right: 10rpx"></text>
								<text>开门</text>
							</view>
							<view v-if="item.showStatus==1" class="opendoor" @click="tiqian(item.id)">
								<text class="iconfont icon-open"
									style="color: #0DA944;font-size: 26rpx;margin-right: 10rpx"></text>
								<text>提前</text>
							</view>
							<view class="xufei" @click="xuding(item.id,item)">
								<text class="iconfont icon-reservation"
									style="#FFFFFF;font-size: 26rpx;margin-right: 10rpx"></text>
								<text>续订</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="xudingpopup" type="bottom">
			<view class="xudingpopup">
				<view class="popuptitle">
					<text>选择续订时间</text>
				</view>
				<view class="meals"><!-- :class="panduan==index1 ? 'meal-item-selected':'meal-item' " -->
					<view :class="panduan==index1 ? 'meal-item-selected':'meal'"  v-for="(item1, index1) in meals" :key="index1"
					 @click="changePrice(item1,$event,index1)">
						<text>{{item1.name}}</text>
					</view>
				</view>
				<view class="xudingsub" @click="xudingOrder()">
					<text>立即续订</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopupShare from "@/components/uni-popup/uni-popup-share.vue";
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import empty from '@/components/empty';
	import { formatDate } from '../../common/date';
	export default {
		components: {
			// uniLoadMore,
			empty,
			uniPopupShare,
			uniPopup
		},
		data() {
			return {
				duration:1,
				tabCurrentIndex: 0,
				meals:[
					{
						duration:1,
						name:'1小时'
					},
					{
						duration:2,
						name:'2小时'
					},
					{
						duration:3,
						name:'3小时'
					},
					{
						duration:4,
						name:'4小时'
					},
					{
						duration:5,
						name:'5小时'
					},
					{
						duration:6,
						name:'6小时'
					},
					{
						duration:7,
						name:'7小时'
					},
					{
						duration:8,
						name:'8小时'
					},
					{
						duration:9,
						name:'9小时'
					},
					{
						duration:10,
						name:'10小时'
					},
				],
				navList: [{
						status: '0',
						text: '全部',
						loadingType: 'more',
						orderList: []
					},
					// {
					// 	status: '12,1',
					// 	text: '待付款',
					// 	loadingType: 'more',
					// 	orderList: []
					// },
					{
						status: '2',
						text: '已付款',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '7',
						text: '已完成',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '14',
						text: '已取消',
						loadingType: 'more',
						orderList: []
					}
				],
				bottomData: [{
						text: '开大门',
						icon: '/static/door1.png',
						name: '5'
					},
					{
						text: '开包厢门',
						icon: '/static/door.png',
						name: '0'
					},
					{
						text: '续费1小时',
						icon: '/static/xufei.png',
						name: '1'
					},
					{
						text: '续费2小时',
						icon: '/static/xufei.png',
						name: '2'
					},
					{
						text: '续费3小时',
						icon: '/static/xufei.png',
						name: '3'
					},
					{
						text: '续费4小时',
						icon: '/static/xufei.png',
						name: '4'
					},
					{
						text: '续费6小时',
						icon: '/static/xufei.png',
						name: '6'
					},
					{
						text: '续费8小时',
						icon: '/static/xufei.png',
						name: '8'
					}
				],
				orderId: 0,
				meal:null,
				panduan:0,
				order:null
			};
		},
		onLoad(options) {
			this.loadData();
		},
		filters: {
			formatStatus(status) {
				if (status == 12) {
					return '待付款'
				}
				if (status == 2) {
					return '已付款'
				}
				if (status == 7) {
					return '已完成'
				}
				if (status == 14) {
					return '已取消'
				}
				if (status == 20) {
					return '待取消'
				}
			}
		},
		onShow() {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			async xudingOrder(){
				let startTime = this.dateFormat(this.order.endTime);
				let duration = this.duration;
				let endTime = this.addDays(startTime, duration);
				this.checkIsIntersect(this.order.device.id, startTime, endTime,duration);
			},
			async openDoor(orderId,showStatus,orderStatus){
				if(showStatus==1||orderStatus!=2){
					uni.showToast({
						icon:'error',
						title:'订单时间未到',
						duration:2000
					})
					return false;
				}
				let params = {
					orderId: orderId,
				}
				let data = await Api.apiCall('get', Api.qsg.openBaoxiang, params);
				if (data) {
					let that = this;
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '操作成功.',
						success: function(res) {
							if (res.confirm) {
								that.loadData('refresh');
							}
						}
					});
				}
			},
			xuding(id,order) {
				this.orderId = id
				this.order = order;
				this.$refs.xudingpopup.open('bottom')
			},
			async tiqian(id) {
				let that = this;
				let data = await Api.apiCall('get', Api.order.tiqian, {
					orderId: id
				});
				if (data == 0) {
					uni.showModal({
						title: '提示',
						content: '提前开始不可撤回,已为你调整订单开始时间到当前时间',
						success: function(res) {
							if (res.confirm) {
								that.loadData('refresh');
							} else if (res.cancel) {

							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '因为与其他订单时间冲突,该订单暂不能提前开始。',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {

							}
						}
					});
				}
			},
			onShareAppMessage(e) {
				if (e.from === "button") {
					// button 按钮分享
					let obj = e.target.dataset.obj // 获取 button 组件 自定义的data-obj值
					console.log(e)
					return {
						title: '喜番自助共享空间', // 标题
						imageUrl: '', // 封面图
						path: `/pages/order/shareOrder?machineName=${obj.device.machineName}&payType=${obj.payType}&startTime=${obj.startTime}&endTime=${obj.endTime}&id=${obj.id}&imageUrl=${obj.device.imageUrl}&orderStatus=${obj.orderStatus}&showStatus=${obj.showStatus}&orderSn=${obj.orderSn}&price=${obj.price}`, // 地址以及参数 
						success: function(res) {
							// 转发成功之后的回调
							if (res.errMsg == 'shareAppMessage:ok') {
								that.$core.msg("分享成功.");
							}
						},
						fail: function() {
							// 转发失败之后的回调
							if (res.errMsg == 'shareAppMessage:fail cancel') {
								// 用户取消转发
								that.$core.msg("取消分享.");
							} else if (res.errMsg == 'shareAppMessage:fail') {
								// 转发失败，其中 detail message 为详细失败信息
								that.$core.msg("分享失败,请稍后再试.");
							}
						}
					};
				} else {
					// 右上角自带的菜单分享
					return {
						path: `/pages/index/index`
					};
				}
			},
			async cannelOrder(item) {
				if(item.payType==1){
					uni.showToast({
						icon:'error',
						title:'续订不可取消'
					})
					return false;
				}
				let time = new Date(item.startTime);
				if(time.getTime() < new Date().getTime()){
					uni.showToast({
						icon:'error',
						title:'订单已开始'
					})
					return false;
				}
				let data = await Api.apiCall('get', Api.order.cannelOrder, {
					orderId: item.id
				});
				if (data) {
					this.loadData();
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}
			},
			longpress(item) {
				uni.showModal({
					title: '确定删除该订单吗',
					content: '',
					success: (e) => {
						if (e.confirm) {
							this.cancelOrder(item)
							this.loadData('refresh');
						}
					}
				})
			},
			shareToggle(index, order) {
				if (order.orderStatus != 2) {
					return false;
				}
				this.order = order;
				this.$refs.popup.open('bottom');
			},
			toGateway(index, order) {
				console.log(order)
				uni.navigateTo({
					url: '/pages/order/gateaway?deviceId=' + order.device.id + '&storeId=' + order.storeId +
						'&orderId=' + order.id
				})
			},
			//获取订单列表
			async loadData() {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.status;

				if (!this.hasLogin) {
					let url = '/pages/public/login';
					uni.navigateTo({
						url
					});
				} else {
					let params = {
						status: status
					};
					let data = await Api.apiCall('get', Api.order.coachOrderList, params);
					// console.log("订单列表" + JSON.stringify(data));
					let orderList = data.records.filter(item => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.orderStatus));
						item.createDatetime = this.dateFormat1(item.createDatetime);
						return item;
					});
					navItem.orderList = [];
					orderList.forEach(item => {
						navItem.orderList.push(item);
					});
				}
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData();
			},
			async payOrder(item) {
				uni.showLoading({
					title: '请稍后'
				});

				let params = {
					orderId: item.id
				};
				let res = await Api.apiCall('post', Api.order.weixinAppletPay, params);
				console.log(res);
				if (res) {
					uni.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success(datas) {
							console.log(datas);
							uni.redirectTo({
								url: '/pages/money/paySuccess'
							})
						},
						fail(err) {
							fail(JSON.stringify(err))
						}
					});
				}
				uni.hideLoading();
			},
			close() {
				this.popup.close()
			},
			//取消订单
			async cancelOrder(item) {
				uni.showLoading({
					title: '请稍后'
				});
				let params = {
					orderId: item.id
				};
				let data = await Api.apiCall('post', Api.order.closeDriverOrder, params);
				console.log(data);
				if (data) {
					this.$core.msg("订单取消成功.");
				}
				uni.hideLoading();
				this.loadData('refresh');
			},
			showCannelOrder(item) {
				let that = this;
				if (item.payType == 1) {
					uni.showModal({
						title: '提示',
						content: '已续费成功的订单不支持取消',
						showCancel: false,
						success: function(res) {}
					});
					return false;
				}
				uni.showModal({
					title: '提示',
					content: '请确认是否需要取消订单?',
					success: function(res) {
						if (res.confirm) {
							that.cannelOrder(item);
						} else if (res.cancel) {

						}
					}
				});
			},
			//订单状态文字和颜色
			orderStateExp(status) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+status) {
					case 12:
						stateTip = '待付款';
						break;
					case 1:
						stateTip = '待付款';
						break;
					case 2:
						stateTip = '已付款';
						break;
					case 7:
						stateTip = '已完成';
						stateTipColor = '#909399';
						break;
					case 8:
						stateTip = '已评价';
						stateTipColor = '#909399';
						break;
					case 15:
						stateTip = '已关闭';
						stateTipColor = '#909399';
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			dateFormat(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy/MM/dd hh:mm');
			},
			dateFormat1(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			},
			/**
			 * 选择内容
			 */
			async select(item, index) {
				let orderId = this.order.id;
				let deviceId = this.order.deviceId;
				if (item.name == '5' || item.name == '0') {
					let params = {
						orderId: orderId,
						taskType: item.name
					}
					if (item.name == '5') {
						let data = await Api.apiCall('get', Api.qsg.openDamen, params);
						if (data) {
							let that = this;
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '操作成功.',
								success: function(res) {
									if (res.confirm) {
										that.$refs.popup.close('bottom');
										that.loadData('refresh');
									}
								}
							});
						}
					} else {
						if (this.order.device.isGateway == 0) {
							let that = this;
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '此房间为网关设备,请在网关列表开门.',
								success: function(res) {
									if (res.confirm) {
										that.$refs.popup.close('bottom');
										that.loadData('refresh');
									}
								}
							});
							return;
						}
						let data = await Api.apiCall('get', Api.qsg.openBaoxiang, params);
						if (data) {
							let that = this;
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '操作成功.',
								success: function(res) {
									if (res.confirm) {
										that.$refs.popup.close('bottom');
										that.loadData('refresh');
									}
								}
							});
						}
					}
				} else {
					let order = this.order;
					console.log(order)
					if (order.openStatus == 0) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '请先开启当前订单',
							success: function(res) {}
						});
						return false;
					}
					if (order.source == 'share') {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '仅支持购买人续费',
							success: function(res) {
								if (res.confirm) {}
							}
						});
						return false;
					}
					let startTime = this.dateFormat(order.endTime);
					let duration = item.name;
					let endTime = this.addDays(startTime, duration);
					this.getMeal(order.id, duration, deviceId, startTime, endTime);
				}
			},
			async checkIsIntersect(deviceId, startTime, endTime,duration) {
				let price = this.order.device.price;
				console.log(price)
				let totalPrice = price * duration;
				console.log('总价'+totalPrice);
				let params = {
					startTime: startTime,
					endTime: endTime,
					price: totalPrice,
					storeId: this.order.storeId,
					deviceId: deviceId,
					duration:duration
				};
				let data = await Api.apiCall('post', Api.order.checkIsIntersect, params);
				if (data && data == 1) {
					uni.showToast({
						icon: "error",
						title: "订单时间冲突"
					})
				} else {
					console.log('下一步')
					this.submit(params)
				}
			},
			changePrice(item, e, index) {
				this.panduan = index;
				this.duration = this.meals[index].duration;
			},
			async submit(params) {
				let data = await Api.apiCall('post', Api.order.createOrder, params);
				console.log(data);
				if (data) {
					let id = data.id;
					let lastId = this.order.id;
					let url = `/pages/money/pay?id=${id}&lastId=${lastId}`;
					uni.redirectTo({
						url: url
					});
				} else {
					that.$core.msg(data);
				}
			},
			addDays(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			},
			navToDetailPage(order) {
				if (order.orderStatus == 2) {
					//跳转至已付款详情
					uni.navigateTo({
						url: '/pages/order/orderdetail_2?orderId=' + order.id+'&imageUrl='+order.device.imageUrl+'&devicename='+order.device.machineName
					})
				}
				if (order.orderStatus == 7) {
					uni.navigateTo({
						url: '/pages/order/orderdetail_7?orderId=' + order.id+'&imageUrl='+order.device.imageUrl+'&devicename='+order.device.machineName
					})
				}
				if (order.orderStatus == 14) {
					uni.navigateTo({
						url: '/pages/order/orderdetail_14?orderId=' + order.id+'&imageUrl='+order.device.imageUrl+'&devicename='+order.device.machineName
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: #f7f7f7;
		height: 100%;
	}

	.opendoor {
		width: 128rpx;
		height: 56rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0DA944;
		line-height: 56rpx;
		text-align: center;
		margin-left: 100rpx;
		margin-right: 20rpx;
	}

	.xufei {
		width: 128rpx;
		height: 56rpx;
		background: #0DA944;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}
	
	.share {
		width: 100rpx;
		height: 56rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		background: #fff;
		border-radius: 100px;
		background: #0DA944;
		color: #fff9f9;
		margin-right: 10rpx;
	}

	.operate {
		height: 80rpx;
		border-top-style: solid;
		border-top-width: 1rpx;
		border-top-color: #EFEFEF;
		padding-top: 10rpx;
		display: flex;
	}

	.tab-content {
		border-radius: 30rpx;
	}

	.bottom-content {
		height: 600rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bottom-content-item {
		flex: 1;
	}

	.bottom-content-item-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.meal-item {
		flex: 1;
		width: 33%;
		height: 200rpx;
		margin-top: 60rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		text-align: center;
		border-radius: 15rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-content-item-column {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.btn-primary {
		background-color: #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #FFFFFF;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 30rpx;
	}

	.btn-default {
		/* background-color: #ff9662; */
		border: 1rpx solid #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #ff9662;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 30rpx;
	}

	.item-no-select {
		background-color: #ff9662;
	}

	.uni-popup-share {
		background-color: #fff;
	}
	
	.meal{
		width: 128rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: #F1F3F4;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		margin-right: 11rpx;
		margin-bottom: 10rpx;
	}
	
	.meal-item-selected{
		width: 128rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: #0DA944;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin-right: 11rpx;
		margin-bottom: 10rpx;
	}
	.meals{
		display: flex;
		margin-top: 60rpx;
		flex-wrap: wrap;
	}

	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}

	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}
	
	.xudingsub{
		width: 686rpx;
		height: 88rpx;
		background: #0DA944;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-top: 30rpx;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}

	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 16px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}

	.swiper-box {
		/*  #ifdef  MP-WEIXIN  */
		height: calc(100% - 40px);
		/* #endif */
		/*  #ifdef  MP-ALIPAY  */
		height: 1200rpx;
		/* #endif */
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #737373;
			position: relative;

			&.current {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1A1A1A;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #0DA944;
				}
			}
		}
	}

	.popuptitle {
		height: 30rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding-top: 20rpx;

			.goods-img {
				display: block;
				width: 148rpx;
				height: 148rpx;
				background: #5A5A5A;
				border-radius: 8rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn1 {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: #127202;
			border-style: solid;
			border-width: 1rpx;
			border-color: #127202;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #127202;
				color: #fff9f9;

				&:after {
					border-color: #f7bcc8;
				}
			}

			&.recom1 {
				background: #ca4300;
				color: #fff9f9;

				&:after {
					border-color: #f7bcc8;
				}
			}

			&.status {
				background: #5f5f5f;
				color: #fff9f9;

				&:after {
					border-color: #f7bcc8;
				}
			}

			&.cannel {
				background: #a73753;
				color: #fff9f9;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}

	.nodata {
		image {
			height: 170rpx;
			width: 170rpx;
		}

		text-align: center;
	}

	.nodatatxt {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
		text-align: center;
	}

	.ordersn {
		height: 20rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
	}

	.roomname {
		height: 34rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		margin-top: 15rpx;
		color: #1A1A1A;
		line-height: 34rpx;
	}

	.stime {
		height: 21rpx;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1A1A1A;
	}

	.createdatetime {
		line-height: 40rpx;
		font-size: 20rpx;
		font-family: ProductSans;
		font-weight: 400;
		color: #9A9A9A;
		flex: 4;
	}

	.price {
		flex: 1;
	}

	.cannel {
		width: 144rpx;
		height: 56rpx;
		background: #FFFFFF;
		border: 1px solid #C2C2CC;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		line-height: 56rpx;
	}

	.xudingpopup {
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding-left: 32rpx;
		padding-top: 30rpx;
	}
</style>